<template>
	<div class="good-details">
		<!-- 公共头部 -->
		<head-goods :HeadShow="HeadShow" v-if="shopInfo" :HeadActive="headIndex" @goScroll="scrollGo"></head-goods>
		<head-goods-search title="蝶丝商城" v-if="!shopInfo"></head-goods-search>
		<!-- 轮播 -->
		<div class="swiper-container" :class="{banneTop:!shopInfo}">
			<swiper class="hd-swiper" @change="bannerChange" circular="true" autoplay="true"  interval="3000">
				<swiper-item class="hd-swiper-item" v-for="(item,index) in  banners" :key="index">
					<img :src="item"/>
				</swiper-item>	
			</swiper>
			<div class="swiper-int-box" v-if="banners.length>1">
				{{bannerActive+1}}/{{banners.length}}
			</div>
		</div>
		<!-- 商品信息 -->
		<div class="goods-info">
			<div class="goods-info-title">
				<h3>￥<span>{{nprice?nprice:baseInfo.price}}</span></h3>
				<p>收藏</p>
			</div>
			<h2>{{baseInfo.title}}</h2>
		</div>
		<!-- 无质量问题 -->
		<div class="service">
			<h3 style="width:100%;color:#999">
				提示：
				<span style="width:87%;color:#999">本产品无质量问题不支持退换货</span>
			</h3>
		</div>
		<div class="service" style="margin-top:0;border-top:1px solid #eee;">
			<h3 style="width:100%">
				服务：
				<div style="width:87%">
					<div><p><i class="hd-icon">&#xe609;</i></p>正品保障</div>
					<div><p><i class="hd-icon">&#xe64f;</i></p>安全支付</div>
					<div><p><i class="hd-icon">&#xe620;</i></p>闪电发货</div>
					<div><p><i class="hd-icon">&#xe638;</i></p>售后无忧</div>
				</div>
			</h3>
		</div>
		
		<!-- 规格 -->
		<div class="service" @click="showSpecifications">
			<h3 style="width:100%">
				选择：
				<span style="width:84%;color:#999">{{sku_list.length<=1?gName:'规格选择'}}</span>
				<i class="hd-icon">&#xe601;</i>
			</h3>
		</div>
		<!-- 属性 -->
		<div class="service" style="margin-top:0;border-top:1px solid #eee;" @click="showSm=true">
			<h3 style="width:100%">
				属性：
				<span style="width:84%;color:#999">基础信息</span>
				<i class="hd-icon">&#xe601;</i>
			</h3>
		</div>
		<!-- 运费 -->
		<div class="service" style="margin-top:0;border-top:1px solid #eee;">
			<h3 style="width:100%">
				运费：
				<span style="width:87%;color:#999">10元（满50包邮）</span>
			</h3>
		</div>
		<!-- 服务协议 -->
		<div class="service" style="margin-top:0;border-top:1px solid #eee;margin-bottom:20rpx;" @click="showDialogService">
			<h3 style="width:100%;color:#999">服务：
					<div style="width:84%;color:#999;margin-left:10rpx;">
						<span style="color:#999">保密配送</span>
						<span style="color:#999">正品保证</span>
						<span style="color:#999">在线支付包邮</span>
					</div>
					<i class="hd-icon">&#xe601;</i>
			</h3>
		</div>
		<!-- 微信顾问 -->
		<!-- <we-chat-user :name="detailsInfo.siteInfo.weixin_name" :imgUrl="detailsInfo.siteInfo.weixin_image"></we-chat-user> -->
		<!-- 评论区域 -->
		<div class="details-rote" style="margin-bottom:20rpx" v-if="commentList||goodsCommentList">
			<div class="details-rote-title">
				<h3>商品评价</h3>
				<p v-if="shopInfo">已有{{commentList.length}}条评论</p>
			</div>
			<view class="details-rote-list" v-if="shopInfo">
				<view class="li" v-for="(item,index) in commentList" :key="index">
					<div class="details-rote-head">
						<div class="details-rote-head-left">
							<div class="details-rote-head-lefts">
								<img :src="item.logo"/>
								<div>
									<h3>{{item.nickname}}</h3>
									<view class="start-list">
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
									</view>
								</div>
							</div>
						</div>
						<p>发表于{{item.addtime}}</p>
					</div>	
					<p>{{item.content}}</p>
				</view>
			</view>
			<view class="details-rote-list" v-if="!shopInfo">
				<view class="li" v-for="(item,index) in goodsCommentList" :key="index">
					<div class="details-rote-head">
						<div class="details-rote-head-left">
							<div class="details-rote-head-lefts">
								<img :src="item.logo"/>
								<div>
									<h3>{{item.nickname}}</h3>
									<view class="start-list">
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
									</view>
								</div>
							</div>
						</div>
						<p>发表于{{item.addtime}}</p>
					</div>	
					<p>{{item.content}}</p>
				</view>
			</view>
		</div>
		<!-- 商品详情 -->
		<view class="details-menu" v-if="shopInfo">
			<view class="li" :class="{active:isActive==0}" @click="menuChange(0)">图文介绍</view>
			<view class="li" :class="{active:isActive==1}" @click="menuChange(1)">售后保障</view>
		</view>
		<div class="details-swiper" style="padding-top:20rpx;" v-if="shopInfo">
				<div class='details-goods' v-if="isActive==0">
					<jyf-parser :tag-style="tagStyle" lazy-load show-with-animation use-cache class="details-images" :html="content" ref="article"></jyf-parser>
				</div>	
				<div class="guarantee" v-if="isActive==1">
					<view v-html="detailsInfo.baseInfo.tips"></view>
				</div>
		</div>
		<div class="like">
            <h3>相似推荐</h3>
            <view class="like-list">
                <view class="li" v-for="(item,index) in salesGoodsList" :key="index" >
                    <img  :src="item.logo" @click="navigateGoods(item.id)"/>
                    <div class="like-list-right">
                        <h3 @click="navigateGoods(item.id)">{{item.title}}</h3>
                        <div class="like-list-right-desc">
                            <p>￥{{item.price}}</p>
                            <div class="like-list-right-desc-price">
                                <div>
                                    <i class="hd-icon">&#xe600;</i>
                                </div>
                                <p @click="buyGoods(item.id)">立即购买</p>
                            </div>
                        </div>
                    </div>
                </view>
            </view>
        </div>
        <div class="like" v-if="askList.length>=1">
            <h3>相关回答</h3>
            <div class="answers-container">
            	<view class="answers-list">
            		<view class="li" v-for="(item,index) in askList" :key="index" @click="navigateTo('/pages/answers/details?id='+item.id)">
            			<div class="answers-q">
            				<h3><span>Q</span>{{item.stitle}} </h3>
            				<p><span>{{item.count?item.count:0}}</span>个回答</p>
            			</div>
            		</view>
            	</view>
            </div>
        </div>
		<fab :topBtn="isTopBtn"></fab>
		<graceBottomDialog :show="showService" v-on:closeDialog="showService=false">
			<view slot="content">
				<view class="service-title">服务<span class="hd-icon" @click="showService=false">&#xe655;</span></view>
				<scroll-view scroll-y class="service-content">
					<view class="service-desc-title">
						<i></i>
						权利声明：
					</view>
					<view class="service-desc-cont">商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是商城重要的经营资源，未经许可，禁止非法转载使用。</view>
					<view class="service-desc-cont">注：本站商品信息（含产品及模特照片）均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。买家在商城购买产品并付款成功，即视为买家已认可并同意将卖家发货地作为双方之间的合同履约地。如不认同，请勿购买。</view>
					<view class="service-desc-title">
						<i></i>
						价格说明：
					</view>
					<view class="service-desc-cont">商城价为商品的销售价，是您最终决定是否购买商品的依据。</view>
					<view class="service-desc-cont">商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在商城平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。</view>
				</scroll-view>
				<view class="service-btn" @click="showService=false">确定</view>
			</view>
		</graceBottomDialog>
		<!-- 商品规格 -->
		<graceBottomDialog :show="specifications" v-on:closeDialog="closeSpecifications">
			<view slot="content">
                <div class="gg-cont">
                    <view class="goods-dialog-list">
                    	<img class="goods-dialog-img" :src="gImg">
                    	<div class="goods-dialog-cont">
                    		<h3>￥{{gPrice==null?'已售完':gPrice}}</h3>
                            <p v-if="gStock">库存：{{gStock}}</p>
                    		<p>{{gName}}</p>
                    	</div>
                    	<span class="hd-icon" @click="closeSpecifications">&#xe655;</span>
                    </view>
                    <scroll-view scroll-y class="fications-content"  v-if="sku_list.length>=1">
                    	<div class="dialog-fications">
                    		<h3>{{baseInfo.sku_name}}：</h3>
                    		<view class="dialog-fications-list" v-if="isShowImage">
                    			<view class="dialog-fications-item"  v-for="(item,index) in sku_list" :key="index">
                    				<img  @click="checkImg(item,index)" :class="{active:isActiveImg==index}" :src="item.image"/>
								</view>
                    		</view>
							<view class="dialog-fications-list" v-if="!isShowImage">
								<view class="dialog-fications-item noImg" :class="{active:isActiveImg==index}" @click="checkImg(item,index)"  v-for="(item,index) in sku_list" :key="index">
									<span>{{item.name}}</span>
								</view>
							</view>
                    	</div>
                    </scroll-view>
                    <div class="goods-num">
                    	<h3>数量：</h3>
                    	<div>
                    		<span @click="closeNum">-</span><span>{{num}}</span><span @click="addNum">+</span>
                    	</div>
                    </div>
                    <div class="goods-btns">
                    	<view @click="shop(false)" v-if="shopBtn">确定</view>
                    	<view @click="payIng" v-if="!shopBtn">确定</view>
                    </div>
                </div>
			</view>
		</graceBottomDialog>
		<!-- 说明 -->
		<graceBottomDialog :show="showSm" v-on:closeDialog="showSm=false">
			<view slot="content">
				<view class="service-title">属性<span class="hd-icon" @click="showSm=false">&#xe655;</span></view>
				<scroll-view scroll-y class="service-content">
					<view class="service-sm">
						<view class="li" v-for="(item,index) in baseInfo.attr_list" :key="index">
							<h3>{{item.title}}</h3>
							<p>{{item.content}}</p>
						</view>
					</view>
				</scroll-view>
				<view class="service-btn" @click="showSm=false">确定</view>
			</view>
		</graceBottomDialog>
		<shop-bottom></shop-bottom>
	</div>
</template>

<script>
	import weChatUser from '@/components/WeChatUser'; //微信客服
	import pages from '@/components/pages';//分页
	import fab from '@/components/fab'; //快捷菜单
	import graceBottomDialog from '@/graceUI/components/graceBottomDialog.vue'; //底部对话框
	import { goodsDetails,saveOrderCart,orderCart } from '@/api/goods';
	import { commentDetails } from '@/api/rote';
	import parser from "@/components/jyf-parser/jyf-parser"; 
	import graceNavBar from "@/graceUI/components/graceNavBar.vue";
	import { getAuth } from '@/api/user';
	export default {
		data() {
			return {
				shopBtn:false,
				isTopBtn:false,
				listHeight:0,  //内部的高度
				swiperHeight:0,  //外部的高度
				showService:false,
				specifications:false,
				detailsInfo:'',
				isActive:0,
				gPrice:'',
				gName:'', 
				gStock:'',
				gImg:'',
				likeTop:'',
				menuTop:'',
				roteTop:'',
				headIndex:0,
				shopInfo:true,
                isActiveImg:0,
                bannerActive:0,
				tagStyle:{
					img:'width:100%;display: block;'
				},
				num:1,
				sku_data_id:'',
				nprice:'',
				goods_id:'',
				HeadShow:true,
				showSm:false,
				isShowImage:true,
                shopName:'',
                site_nei_id:'',
				banners: [],
				gname: '',
				baseInfo: [],
				sku_list: [],
				wxInfo:[],
				siteInfo:[],
				commentList: [],
				salesGoodsList: [],
				goodsCommentList: [],
				askList: [],
				content: '',
				tips: '',
			}
		},
		components:{
			fab,
			weChatUser,
			pages,
			graceBottomDialog,
			"jyf-parser": parser,
		}, 
		watch:{
			detailsInfo(n){
				let isTrue =  n.baseInfo.sku_list.every((item)=>{
					return item.image!='';
				})
				this.isShowImage  =  isTrue;
			}
		},
		onLoad(e){
			if(e.id){
				this.goods_id = e.id;
				goodsDetails(e.id).then((res)=>{
                    if(res.data.msg=='商品不存在或已被下架'){
                        uni.showModal({
                            title: '提示',
                            content: '商品不存在或已被下架',
                            showCancel:false,
                            success: function (res) {
                                if (res.confirm) {
                                   uni.navigateBack({
                                       delta:1
                                   });
                                } 
                            }
                        });
                        return;
                    }
					this.detailsInfo = res.data.datas;
                    this.shopName = res.data.datas.siteName;
					const {
						siteInfo,
						baseInfo,
						commentList,
						goodsCommentList,
						salesGoodsList,
						askList
					} = res.data.datas;
					this.siteInfo = siteInfo
					this.baseInfo = baseInfo
					this.commentList = commentList
					this.salesGoodsList = salesGoodsList
					this.goodsCommentList = goodsCommentList
					this.askList = askList
					this.sku_list = baseInfo.sku_list
					this.banners = baseInfo.logo_array
					this.content = baseInfo.content
					this.tips = baseInfo.tips
					if(baseInfo.sku_list[0]){
						this.gname = baseInfo.sku_list[0].name
					}
					/* 初始化规格 */
					if (this.sku_list.length <= 1) {
						if (this.sku_list.length == 1) {
							let info = this.sku_list[0];
							this.gPrice = info.price;
							this.gName = info.name;
							this.gStock = info.stock;
							this.gImg = info.image ? info.image : this.banners[0];
							this.sku_data_id = info.sku_id;
							this.nprice = info.price;
						} else {
							this.gPrice = this.baseInfo.price;
							this.gName = this.baseInfo.title;
							this.gImg = this.banners[0];
							this.gStock = 99;
							this.sku_data_id = '';
							this.nprice = this.baseInfo.price;
						}
					} else {
						this.isActiveImg = -1;
						this.gPrice = this.baseInfo.price;
						this.gName = this.baseInfo.title;
						this.gImg = this.banners[0];
					}
				})
			}else{
                this.goods_id = e.roteid;
				commentDetails(e.roteid).then((res)=>{
                    if(res.data.msg=='商品不存在或已被下架'){
                        uni.showModal({
                            title: '提示',
                            content: '商品不存在或已被下架',
                            showCancel:false,
                            success: function (res) {
                                if (res.confirm) {
                                   uni.navigateBack({
                                       delta:1
                                   });
                                } 
                            }
                        });
                        return;
                    }
					this.shopInfo=false;
					this.detailsInfo = res.data.datas;
                    this.shopName = res.data.datas.siteName;
					const {
						wxInfo,
						baseInfo,
						goodsCommentList,
						salesGoodsList,
						askList
					} = res.data.datas;
					this.wxInfo = wxInfo
					this.baseInfo = baseInfo
					this.salesGoodsList = salesGoodsList
					this.goodsCommentList = goodsCommentList
					this.askList = askList
					this.sku_list = baseInfo.sku_list
					this.banners = baseInfo.logo_array
					this.content = baseInfo.content
					this.tips = baseInfo.tips
					if(baseInfo.sku_list[0]){
						this.gname = baseInfo.sku_list[0].name
					}
					/* 初始化规格 */
					if (this.sku_list.length <= 1) {
						if (this.sku_list.length == 1) {
							let info = this.sku_list[0];
							this.gPrice = info.price;
							this.gName = info.name;
							this.gStock = info.stock;
							this.gImg = info.image ? info.image : this.banners[0];
							this.sku_data_id = info.sku_id;
							this.nprice = info.price;
						} else {
							this.gPrice = this.baseInfo.price;
							this.gName = this.baseInfo.title;
							this.gImg = this.banners[0];
							this.gStock = 99;
							this.sku_data_id = '';
							this.nprice = this.baseInfo.price;
						}
					} else {
						this.isActiveImg = -1;
						this.gPrice = this.baseInfo.price;
						this.gName = this.baseInfo.title;
						this.gImg = this.banners[0];
					}
				})
			}
			this.$nextTick(()=>{
				uni.createSelectorQuery().select(".details-rote").boundingClientRect((res)=>{
					this.roteTop = res.top;
				}).exec()
				uni.createSelectorQuery().select(".details-menu").boundingClientRect((res)=>{
					this.menuTop = res.top;
				}).exec()
				uni.createSelectorQuery().select(".like").boundingClientRect((res)=>{
					this.likeTop = res.top;
				}).exec()
			})
		},
		onPageScroll(e){ 
			if(0<e.scrollTop&&e.scrollTop<this.roteTop){
				this.headIndex=0;
			}
			if(this.roteTop<e.scrollTop&&e.scrollTop<this.menuTop){
				this.headIndex=1;
			}
			if(this.menuTop<e.scrollTop&&e.scrollTop<this.likeTop){
				this.headIndex=2;
			}
			if(this.likeTop<e.scrollTop){
				this.headIndex=3;
			}
			if(e.scrollTop>=100){
				this.HeadShow =false
			}
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
				this.HeadShow=true
			}
		},
		computed:{
			userInfo(){
				return getAuth();
			}
		},
		onShow(){
		},
		methods: {
			navigateGoods(id){
				this.$Shop.navigateGoods(id);
			},
            buyGoods(id){ //立即购买
                this.$Shop.navigateGoods(id)
            },
			payIng(){ //立即购买按钮
				this.shop(true)
			},
			shop(type){
				if(this.isActiveImg==-1){
					uni.showToast({
						title:'请选择规格 ',
						icon:'none' 
					})
					return
				}
				if(this.sku_list.length>=1){
					if(!this.sku_data_id||this.gStock==0){
						uni.showModal({
							title: '提示',
							content: '商品已售罄,立即返回？',
							showCancel: true,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
						return
					}
				}
				let data= {}
				data['username']=this.userInfo.username;
				data['goods_id']=this.goods_id;
				data['sku_data_id']=this.sku_data_id;
				data['num']=this.num;
				saveOrderCart(data).then((res)=>{
						if(type){
							let cartGoods={};
							//下单接口
							orderCart({
								'username': this.userInfo.username
							}).then((resData) => {
								let goodsList = resData.data.datas.goodsList;  //获取当前购物车列表
								goodsList.forEach((item)=>{ //遍历当前购物车数据
                                    if(item.name ==this.shopName){ //筛选与当前商品店铺名相同的数据
                                        item.list.forEach((itemTwo,index)=>{ //遍历当前数据
                                            if(item.list.length==1){ //如果只有一个，直接赋值
                                                cartGoods = itemTwo 
                                            }else{ //否则筛选当前规格，或者标题是否与购物车中相同，相同则赋值
                                                if(itemTwo.sku_name==this.gName||itemTwo.title==this.gName){
                                                	cartGoods = itemTwo
                                                }
                                            }
                                        })
                                    }
								})
								uni.navigateTo({
									url: '/pages/shop/order?ids=' +cartGoods.cartId
								})
								
							})
						}else{
							uni.showToast({
								title:'成功加入购物车',
								icon:'none'
							})
						}
						/*this.closeSpecifications();
						 uni.navigateTo({
							url:'/pages/shop/shopping'
						}) */
				})
			},
			closeNum(){
				if(this.num<=1){
					uni.showToast({
						title:'不能再减了',
						icon:'none'
					})
				}else{
					this.num--
				}
			},
			addNum(){
				this.num++
			},
            bannerChange(e){
                 this.bannerActive = e.detail.current;
            },
            checkImg(item,index){
				this.num = 1;
                this.isActiveImg = index;
                this.gPrice = item.price;
                this.gName = item.name;
                this.gStock = item.stock;	
				if(item.image){
					this.gImg =  item.image
				}
				this.sku_data_id = item.sku_id;
				this.nprice = item.price;
            },
			scrollGo(index){
				if(index==0){
					uni.pageScrollTo({
					    scrollTop: 0,
					    duration: 300
					});
				}
				if(index==1){
					uni.pageScrollTo({
					    selector:'.details-rote',
					    duration: 300
					});
				}
				if(index==2){
					uni.pageScrollTo({
						selector:'.details-menu',
					    duration: 300
					});
				}
				if(index==3){
					uni.pageScrollTo({
						selector:'.like',
					    duration: 300
					});
				}
			},	
			menuChange(index){
				this.isActive = index;
			},
			showDialogService(){
				this.showService = true;
			},
			closeDialogService(){
				this.showService = false;
			},
			showSpecifications(e){
				this.specifications = true;
				if(e==0){
					this.shopBtn =true
				}else{
					this.shopBtn =false
				}
			},
			closeSpecifications(){
				this.specifications = false;
			},
			trigger(e){
				uni.redirectTo({
				    url: e.item.url
				}); 
			},
			navigateTo(url){
				uni.navigateTo({
				    url: url
				});
			},
            goShop(){
                uni.reLaunch({
                	url:`../shop/index?id=${this.detailsInfo.baseInfo.site_nei_id}`
                });
            }
		}
	}
</script>

<style lang="scss">
    .banneTop{
        margin-top:90rpx;
    }
	.service-sm{
		.li{
			display: flex;
			justify-content: space-around;
			align-items: center;
			h3{
				width:100rpx;
				color:#999;
				font-size:24rpx;
			}
			p{
				width:500rpx;
				font-size:24rpx;
			}
			padding:20rpx;
			border-bottom:1px solid #eee;
		}
	}
	.service{
		h3{
			font-size:24rpx !important;
			color:#999;
			span{
				font-size:24rpx;
				color:#999;
			}
			&>div{
				display: flex;
				justify-content: flex-start;
				div{
					display: flex !important;
					justify-content: flex-start;
					align-items: center;
					font-size:24rpx;
					color:#999;
					margin-right:10rpx;
					p{
						width:40rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						color:#fff;
						background: #ed1475;
						border-radius:50%;
					}
					margin-left:10rpx;
				}
			}	
		}
	}
	.swiper{width:100%; height:388rpx;}
	.demo{width:100%; height:388rpx; background-color:#F5F6F8; text-align:center;}
	.demo-txt{line-height:388rpx; color:#999999; font-size:50rpx;}
	.swiper-container{
		position:relative;
		.hd-swiper{
			width:100%;
			height:375px;
			background: #fff;
			.hd-swiper-item{
				width:100%;
				height:100%;
				img{
					width:100%;
					height:100%;
				}
			}
		}
		.swiper-int-box{
			width: 192rpx;
			padding: 24rpx 0;
			position: absolute;
			bottom: 28rpx;
			right: 0;
			background: rgba(154, 147, 147, 0.6);
			text-align: center;
			border-top-left-radius: 76rpx;
			border-bottom-left-radius: 76rpx;
			color: #fff;
		}
	}
	.goods-info{
		border-top:1px solid #eee;
		background: #fff;
		padding-bottom:40rpx;
		.goods-info-title{
			width:710rpx;
			margin:0 auto;
			padding-top:30rpx;
			display: flex;
			justify-content: space-between;
			h3{
				color:#ed1475;
				font-size:24rpx;
				span{
					font-size:40rpx;
					font-weight: bold;
				}
			}
		}	
		h2{
		   width:710rpx;
		   margin:0 auto;
		   padding-top:10rpx;
		   display: flex;
			   font-size:28rpx;
		}
	}
	.service{
		padding:20rpx 10rpx;
		background: #fff;	
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top:20rpx;
		h3{
			color:#7F7F7F;
			font-size:28rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			span{
				display:inline-block;
				color:#181818;
				margin-left:10rpx;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
			}
		}
		
	}
	.details-menu{
		background: #fff;
		display: flex;
		justify-content: space-between;
		border-bottom:1px solid #eee;
		.li{
			width:50%;
			text-align: center;
			height:80rpx;
			line-height: 80rpx;
			font-size:32rpx;
			&.active{
				color:#FF273F;
			}
		}
	}
	.details-swiper{
		background: #fff;
		padding-bottom:40rpx;
		.details-goods{
			width:710rpx;
			margin:0 auto;
			h3{
				color:#ff468f;
				font-size:28rpx;
				border-bottom:1px solid #eee;
				padding:20rpx 0;
				margin-bottom:20rpx;
			}
			.details-images{
				image{
					display: block;
					width:100%;
				}
				margin-bottom:20rpx;
			}
			.details-cont{
				image{
					display: block;
					width:100%;
					margin-bottom:20rpx;
				}
				p{
					background: #FFF8F5;
					color:#7F1911;
					padding:20rpx 40rpx;
					font-size:24rpx;
					line-height: 32rpx;
					margin-bottom:20rpx;
				}
			}
		}
		// 详细参数
		.details-desc{
			width:710rpx;
			margin:0 auto;
			&>h3{
				color:#ff468f;
				font-size:28rpx;
				border-bottom:1px solid #eee;
				padding:20rpx 0;
				margin-bottom:20rpx;
			}
			ul{
				li{
					margin-bottom:40rpx;
					h3{
						color:#333;
						font-size:28rpx;
						margin-bottom:10rpx;
					}
					p{
						color:#a3a3a3;
						font-size:28rpx;
						line-height:36rpx;
					}
				}
			}
		}
		.guarantee{
			width:710rpx;
			margin:0 auto;
			&>h3{
				color:#ff468f;
				font-size:28rpx;
				border-bottom:1px solid #eee;
				padding:20rpx 0;
				margin-bottom:20rpx;
			}
			p{
				background: #FFF8F5;
				color:#7F1911;
				padding:20rpx 40rpx;
				font-size:24rpx;
				line-height: 32rpx;
				margin-bottom:20rpx;
			}
		}
	}
	.details-rote{
		background: #fff;
		border-top:1px solid #eee;
		padding:20rpx 0;
		.details-rote-title{
			width:710rpx;
			margin:0 auto;
			display: flex;
			justify-content: space-between;
			border-bottom:1px solid #eee;
			padding-bottom:20rpx;
            h3{
                position: relative;
                padding-left:20rpx;
                &::before{
                    display: block;
                    content: '';
                    color: #333;
                    width: 4px;
                    height: 22px;
                    background: #ed1475;
                    position: absolute;
                    left: 0rpx;
                }
            }
			h3,p{
				font-size:28rpx;
				color:#343434;
			}
		}
		.details-rote-list{
			&>.li{
				width:710rpx;
				margin:0 auto;
				padding:30rpx 0;
				border-bottom:1px solid #eee;
				&>p{
					color:#666;
					font-size:28rpx;
					line-height: 36rpx;
					margin-top:20rpx;
				}
				.details-rote-head{
					display: flex;
					justify-content: space-between;
					align-items: center;
					p{
						font-size:24rpx;
						color:#999;
					}
					.details-rote-head-left{
						display: flex;
						justify-content: space-between;
						.details-rote-head-lefts{
							display: flex;
							justify-content: flex-start;
							img{
								width:100rpx;
								height:100rpx;
								border-radius:50%;
								margin-right:20rpx;
							}
							div{
								h3{
									font-size:24rpx;
									color:#343434;
									margin-bottom:10rpx;
									margin-top:20rpx;
								}
								.start-list{
									display: flex;
									justify-content: flex-start;
									.hd-icon{
										color:#f4ba09;
										font-size:24rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.like{
		margin-top:20rpx;
        background: #fff;
        &>h3{
            padding:20rpx;
            border-bottom:1px solid #eee;
            position: relative;
            padding-left:40rpx;
            &::before{
                display: block;
                content: '';
                color: #333;
                width: 4px;
                height: 22px;
                background: #ed1475;
                position: absolute;
                left: 20rpx;
            }
        }
        .like-list .li{
            padding:20rpx;
            border-bottom:1px solid #eee;
            display: flex;
            justify-content:space-between;
            img{    
                width:210rpx;
                height: 210rpx;
                box-shadow:0px 0px 10px 3px #eee;
            }
            .like-list-right{
                width:458rpx;
                position: relative;
                h3{
                    font-size:24rpx;
                    color:#333;
                }
                .like-list-right-desc{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    position: absolute;
                    bottom:0;
                    &>p{
                        font-size:24rpx;
                        color:#ed1475;
                        span{
                            color:#999;
                            font-size:22rpx;
                             text-decoration:line-through;
                             margin-left:10rpx;
                        }
                    }
                    .like-list-right-desc-price{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        border: 2px solid #ed1475;
                        background-color: #ed1475;
                        padding-right:10rpx ;
                        border-radius:8rpx;
                        div{
                            background: #fff;
                            padding: 8rpx 12rpx;
                            margin-right:10rpx;
                            i{
                                color:#ed1475;
                            }
                        }
                        p{
                            color:#fff;
                            font-size:24rpx;
                        }
                    }
                }
            }
        }
	}
	.answers-container{
		margin-top:20rpx;
		padding-top:20rpx;
		background: #fff;
		.answers-list{
			width:700rpx;
			margin:0 auto;
			.li{
				padding-bottom:20rpx;
				border-bottom:1px dotted  #eee;
				margin-bottom:20rpx;
			}
			.answers-q{
				display: flex;
				justify-content: space-between;
				h3{
					margin-bottom:10rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color:#fd8197;
					font-size:13px;
					span{
						display: block;
						background: #fd8197;
						color:#fff;
						padding:2px 6px;
						border-radius: 4px;
						margin-right:6px;
					}
				}
				p{
					font-size:13px;
					span{
						color:#fd8197;
					}
					color:#666;
				}
			}
			.answers-a{
				display: flex;
				justify-content: space-between;
				margin-top:16rpx;
				span{
					font-size:13px;
					display: block;
					background: #1bca8a;
					color:#fff;
					border-radius: 4px;
					margin-right:6px;
					width:108rpx;
					height:40rpx;
					line-height: 40rpx;
					text-align: center;
				}
				p{
					color:#666;
					font-size:13px;
					line-height: 18px;
				}
			}
		}
	}
	.foot-copy{
		width:700rpx;
		margin:0 auto;
		color:#333;
		font-size:24rpx;
		line-height: 40rpx;
		text-align: left;
		margin-bottom:30rpx;
		margin-top:40rpx;
	}
	.shop-history{
		margin-top:20rpx;
		background: #fff;
		padding-bottom:40rpx;
		h3{
			width:690rpx;
			margin:0 auto;
			border-bottom:1px solid #eee;
			padding:30rpx 0 20rpx 0; 
			font-size:28rpx;
			color:#343434;
		}
		div{
			border:1px solid #eee;
			width:690rpx;
			margin:0 auto;
			margin-top:20rpx;
			.shop-history-head{
				display: flex;
				justify-content: space-between;
				li{
					width:20%;
					text-align: center;
					height:56rpx;
					line-height: 56rpx;
					background: #f5f5f5;
					color:#343434;
					font-weight:bold;
					font-size:24rpx;
				}
			}
			.shop-history-list{
				.shop-history-list-item{
					border-bottom:1px solid #eee;
					&:nth-last-of-type(1){
						border-bottom:none
					}
					ul{
						display: flex;
						justify-content: space-between;
						
						li{
							flex:1;
							overflow:hidden;
							text-overflow:ellipsis; 
							white-space:nowrap; 
							text-align: center;
							height:56rpx;
							line-height: 56rpx;
							color:#343434;
							font-size:24rpx;
						}
					}
				}
			}
		}
	}
	.service-title{
		height:80rpx;
		line-height: 80rpx;
		text-align: center;
		position:relative;
		color:#343434;
		font-size:32rpx;
		font-weight:bold;
		border-bottom:1rpx solid #eee;
		span{
			position:absolute;
			right:26rpx;
			top:-6rpx;
			font-size:24rpx;
			color:#a5a5a5;
		}
	}
	.service-content{
		padding:20rpx;
		width:710rpx;
		height: 700rpx;
		.service-desc-title{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size:30rpx;
			color:#181818;
			margin-bottom:20rpx;
			i{
				display: block;
				width:15rpx;
				height:15rpx;
				border-radius: 50%;
				background: #ff2150;
				margin-right:10rpx;
			}
		}
	}
	.service-desc-cont{
		color:#7f7f7f;
		font-size:26rpx;
		margin-bottom:20rpx;
		line-height: 44rpx;
	}
	.service-btn{
		width:690rpx;
		margin:0 auto;
		background: #ff2150;
		font-size:28rpx;
		color:#fff;
		height:80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}
    .gg-cont{
        min-height: 800rpx;
        position: relative;
    }
	.goods-dialog-list{
		width:710rpx;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		padding-top:30rpx;
		border-bottom:1px solid #eee;
		padding-bottom:30rpx;
		position: relative;
		.hd-icon{
			position:absolute;
			right:26rpx;
			top:20rpx;
			font-size:24rpx;
			color:#a5a5a5;
		}
		img{
			width: 188rpx;
			height: 188rpx;
			position: absolute;
			top: -72rpx;
			border-radius: 11rpx;
			border: 1px solid #eee;

		}
		.goods-dialog-cont{
			width: 488rpx;
			margin-left: 215rpx;
			h3{
				color:#ff2150;
				font-size:28rpx;
			}
			p{
				color:#999;
				font-size:24rpx;
				overflow:hidden;
				text-overflow:ellipsis; 
				white-space:nowrap; 
				margin-top:8rpx;
			}
		}
	}
	.fications-content{
		padding:20rpx;
		width:710rpx;
		max-height:300rpx;
	}
	.dialog-fications{
		h3{
			color:#333;
			font-size:28rpx;
			margin-bottom:10rpx;
		}
		.dialog-fications-list{
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			.noImg{
				width: auto !important;
				height: auto !important;
				font-size: 24rpx;
				background: #eee;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				color: #666;
				&.active{
					background: #ff2150;
					color:#fff;
				}
			}
			.dialog-fications-item{
				width:80rpx;
				height:80rpx;
				margin-right:14rpx;
				margin-bottom:20rpx;
				img{
					width:100%;
					height:100%;
                    &.active{
                        border:1px solid red;
                    }
				}
			}
		}
	}
	.goods-num{
		width:710rpx;
		border-top:1rpx solid #eee;
		margin:0 auto;
		padding-top:20rpx;
		display: flex;
        justify-content: space-between;
        align-items: center;
		h3{
			color:#333;
			font-size:28rpx;
			margin-bottom:10rpx;
		}
		div{
			display: flex;
			justify-content: flex-start;
			margin-top:10rpx;
			span{
				width:60rpx;
				height:60rpx;
				line-height: 60rpx;
				text-align: center;
				color:#333;
				font-size:30rpx; 
				background: #f7f7f7;
				margin-right:4rpx;
				&:nth-of-type(2){
					width:auto;
					padding: 0 30rpx;
				}
				&:nth-of-type(3){
					color:#ff2150;
				}
			}
		}
	}
	.goods-btns{
        position:absolute;
        bottom:0;
        left:0;
        width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top:30rpx;
		view{
			width:100%;
			height:80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size:28rpx;
			color:#fff;
			background: #ed1475;
		}
	}
</style>
